<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 15:23:46
 * @LastEditTime: 2022-07-28 14:50:20
-->
<template>
  <div class="order-remark" v-if="remarkFlag">
    <div class="flex flex-horizontal-between" style="margin-bottom:20px;">
      <p class="title" style="margin-right:20px;">订单备注</p>
      <Button type="primary" @click="addRemark" v-if="remarkBtnFlag">添加备注</Button>
    </div>
    <dt-grid ref="table" :columns="columns" :list="remarkList" v-if="remarkList.length"
      :heightResize="true">
    </dt-grid>
    <dt-modal-edit ref="edit" title="订单备注" @ok="onOk" :transfer="true"></dt-modal-edit>
  </div>
</template>
<script>
  import ParamsRemark from './remark'
  import comMgr from '@/biz/sales/salesCommon'
  export default {
    props: ['detailMsg', 'contractId', 'subscriptionId', 'orderStatusName'],
    data() {
      return {
        columns: [],
        remarkList: [],
        remarkInfo: {
          remark: ''
        },
        remarkFlag: false,
        remarkBtnFlag: false
      }
    },
    created() {

    },
    mounted() {
      // 回款中、已全款、已交房、退签中、已退签
      // 回款中、已全款、已交房、退签中、已退签 展示订单备注模块
      this.columns = new ParamsRemark(this).options().columns

      this.remarkList = this.detailMsg.orSubscriptionRemarkVOList

      let statusName = this.detailMsg.orContractBaseInfoVO.statusName

      if (this.orderStatusName == '认购') {
        // 未签约、已签约、退购中、已退购、已退签 展示订单备注模块
        this.remarkFlag = ['认购未签约', '认购已签约', '认购退购中', '认购已退购', '认购已退签'].indexOf(
          statusName) > -1 ? true : false
        this.remarkBtnFlag = this.unlocking('0104010312')
      } else {
        // 回款中、已全款、已交房、退签中、已退签 展示订单备注模块
        this.remarkFlag = ['签约回款中', '签约已全款', '签约已交房', '签约退签中', '签约已退签'].indexOf(
          statusName) > -1 ? true : false
        this.remarkBtnFlag = this.unlocking('0104030320')
      }


      if (this.remarkList.length) {
        this.$nextTick(() => {
          this.$refs.table.loadList(this.remarkList)
        })
      }
    },
    methods: {
      onOk() {
        //去掉所有的换行符
        this.remarkInfo.remark = this.remarkInfo.remark.replace(/\r\n/g, "")
        this.remarkInfo.remark = this.remarkInfo.remark.replace(/\n/g, "");

        //去掉所有的空格（中文空格、英文空格都会被替换）
        this.remarkInfo.remark = this.remarkInfo.remark.replace(/\s/g, "");

        if (!this.remarkInfo.remark.length) {
          this.$Message.error('订单备注不能为空')
          return false
        }
        let params = {
          ...this.remarkInfo,
          contractId: this.contractId,
          subscriptionId: this.subscriptionId
        }
        comMgr
          .createSubscriptionRemarkFun(params)
          .then((res) => {
            this.$refs.edit.hide()
            this.$emit('onGetOrderDetail')
          })
          .catch((res) => {})
      },
      addRemark() {
        this.$refs.edit.show(new ParamsRemark(this).options().remarkOptions, this.remarkInfo)
      },
      onDelete(row) {
        this.$Modal.confirm({
          title: '删除',
          content: `删除后备注无法找回，是否继续删除？`,
          closable: true,
          onOk: () => {
            let params = {
              id: row.id
            }
            comMgr
              .delSubscriptionRemarkFun(params)
              .then((res) => {
                this.$refs.edit.hide()
                this.$emit('onGetOrderDetail')
              })
              .catch((res) => {})
          },
          onCancel: () => {},
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .order-remark {
    margin-top: 20px;
  }
</style>